<template>
  <div>
    <span>用户名 </span><input type="text" name="username" /><br />
    <span style="margin-right: 15px">密码 </span
    ><input type="text" name="password" />

    <div style="margin-top: 20px">
      <button style="margin-right: 20px">登录</button>
      <button @click="jump">注册</button>
    </div>
  </div>
</template>
 
<script>
export default {
  name: '',
  components: {},
  props: {},
  data() {
    return {}
  },
  computed: {},
  watch: {},
  created() {},
  methods: {
    toRegister() {
      //$router是全局的路由对象，可以用来控制路由的路径，模式等等
      // console.log(this.$router)
      //$route是局部的路由对象，一般用来获取路由传参的信息
      // console.log(this.$route)
      // this.$router.push({
      //   path: '/register',
      //   // name: 'Register',
      //   //编程式导航传参，query形式无论式name还是path都不受影响
      //   query: {
      //     username: 'harry'
      //   }
      //   //如果使用编程式导航，传参使用params方式，那么就一定要使用name来声明
      //   // params: {
      //   //   username: 'despot'
      //   // }
      // })
      // this.$router.push('/register/despot')
    },

    jump() {
      this.$router.push({
        // path: '/register'
        name: 'Register',
        // query: {
        //   username: 'harry'
        // }

        params: {
          username: 'despot'
        }
      })
    }
  }
}
</script>

<style scoped>
</style>